// ui/components/WhiteboardItem.js
// Assuming ElementPlus components (ElTooltip, ElButton) and icons (Delete) are globally available.

export default {
  name: 'WhiteboardItem',
  // components: { Delete }, // Not needed if globally registered
  props: {
    item: {
      type: Object, // Was PropType<WhiteboardItemModel>
      required: true
      // JSDoc for reference:
      /**
       * @type {{
       *   reference_id: string;
       *   display_name: string;
       *   full_local_path: string;
       *   uploader_participant_id: string;
       *   timestamp_added: string;
       * }}
       */
    }
  },
  emits: ['remove'],
  setup(props, { emit }) {
    function requestRemove() {
      emit('remove', props.item.reference_id);
    }

    return {
      // props are automatically available
      requestRemove,
    };
  },
  template: `
  <li class="whiteboard-item">
    <el-tooltip :content="item.full_local_path" placement="top" :disabled="!item.full_local_path">
      <div class="item-content">
        <span class="item-name">
          {{ item.display_name }}
        </span>
      </div>
    </el-tooltip>
    <el-tooltip content="移除此项" placement="top">
      <el-button
        type="danger"
        icon="Delete"
        circle
        size="small"
        @click="requestRemove"
        class="remove-button-el"
      />
    </el-tooltip>
  </li>
  `
};